import React, { Component } from 'react'
import { Table, Tag, Space, Modal} from 'antd';
import axios from 'axios'
import { Button, Tooltip } from 'antd';
import { DeleteOutlined, EditOutlined} from '@ant-design/icons';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;
export default class RoleList extends Component {
  state = {
    dataSource: []
  }
  componentDidMount() {
    this.getRoleList()
  }
  getRoleList = () => {
    axios.get('http://localhost:8000/right?_embed=children').then(res => {
      res.data[0].children = ""
      this.setState({
        dataSource:res.data
      })
    })
  }
  showConfirm() {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  render() {
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '权限名称',
        dataIndex: 'title',
      },
      {
        title: '权限路径',
        dataIndex: 'key',
        render:(key)=>{
            return <Tag color="orange">{key}</Tag>
        }
      },
      {
        title: '操作',
        render:(key)=>{
            return <div>
               <Button type="danger" shape="circle" onClick={()=>{showConfirm} icon={<DeleteOutlined />} />
               <Button type="primary" shape="circle" icon={<EditOutlined />} />
            </div>
        }
      },
    ];
    return (
      <div>
        <Table dataSource={this.state.dataSource} columns={columns} pagination={
          {pageSize:5}
        }/>;
      </div>
    )
  }
}
